<template>
  <div class="wrapper">
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick, inject } from 'vue';

// 定义props
const props = defineProps({
  // 图表数据
  data: {
    type: Array,
    default: () => [],
  },
  labelColor: {
    type: String,
    default: '#333',
  },
  colorFrom: {
    type: String,
    default: '#589BFD',
  },
  colorTo: {
    type: String,
    default: '#BBDEFF',
  },
  // 图表标题
  title: {
    type: String,
    default: '',
  },
  // y轴名字
  yAxisName: {
    type: String,
    default: '',
  },
  // 是否显示数值标签
  showLabel: {
    type: Boolean,
    default: true,
  },
  // 数值标签位置
  labelPosition: {
    type: String,
    default: 'top', // 'top', 'inside', 'insideTop', 'insideBottom'
    validator: (value) =>
      ['top', 'inside', 'insideTop', 'insideBottom'].includes(value),
  },
  // 柱子宽度
  barWidth: {
    type: String,
    default: '34px',
  },
  // 渐变色方向
  gradientDirection: {
    type: String,
    default: 'vertical', // 'vertical', 'horizontal', 'diagonal'
    validator: (value) =>
      ['vertical', 'horizontal', 'diagonal'].includes(value),
  },
  // 柱子圆角
  borderRadius: {
    type: Array,
    default: () => [5, 5, 0, 0],
  },
});

const Echarts = inject('$echarts');

const chartRef = ref(null);
let chartInstance = null;

const initChart = () => {
  if (!chartRef.value) return;

  chartInstance = Echarts.init(chartRef.value);
  updateChart();
};

// 更新图表
const updateChart = () => {
  if (!chartInstance) return;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: props.data.map((item) => item.name || item.label || item.x),
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLabel: {
        // 保证所有label都显示出来
        interval: 0,
        formatter: function (value) {
          // 如果文字长度大于4，则分两行显示
          if (value && value.length > 4) {
            return value.slice(0, 4) + '\n' + value.slice(4);
          }
          return value;
        },
        fontSize: 14,
        color: '#555',
        lineHeight: 22,
      },
      axisLine: {
        lineStyle: {
          color: '#E4EDF8',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: props.yAxisName,
      position: 'top',
      nameTextStyle: {
        fontSize: 16,
        color: '#555',
        padding: [0, 0, 18, 18],
      },
      axisLine: {
        lineStyle: {
          color: '#E4EDF8',
          width: 6, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        show: true, // 是否显示刻度标签
        color: '#555', // 刻度标签文字的颜色
        fontSize: 16, // 文字字体大小
      },
      // splitLine: {
      //   show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
      //   color: 'red', // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
      //   width: 5, // 分隔线线宽
      //   type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
      // },
    },
    series: [
      {
        name: '数值',
        type: 'bar',
        data: props.data.map((item) => item.value || item.y),
        label: {
          show: props.showLabel,
          position: props.labelPosition,
          formatter: '{c}',
          fontSize: 18,
          fontWeight: 'bolder',
          color: props.labelColor,
        },
        itemStyle: {
          borderRadius: props.borderRadius,
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: props.colorFrom },
            { offset: 1, color: props.colorTo },
          ]),
        },
        barWidth: props.barWidth,
      },
    ],
  };

  chartInstance.setOption(option, true);
};

// 监听数据变化
watch(
  () => [props.data],
  () => {
    nextTick(() => {
      updateChart();
    });
  },
  { deep: true }
);

// 监听窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时销毁图表
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});

// 暴露方法给父组件
defineExpose({
  // 获取图表实例
  getChartInstance: () => chartInstance,
  // 手动更新图表
  updateChart,
  // 手动调整大小
  resize: handleResize,
});
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  .chart-container {
    width: 100%;
    height: 100%;
  }
}
</style>
